<template>
	<view>
		<u-navbar back-text="返回" title="编辑简历" :border-bottom="false" :back-text-style="{color: 'rgba(16,142,233,1)' }"
		 back-icon-color="#108EE9">
			<view class="slot-wrap">
				<view class="topBox">
					<view class="top-fill">

					</view>
					<view class="clear-all" @click="submit">
						保存
					</view>
				</view>
			</view>
		</u-navbar>
		<view class="content">
			<u-form :model="form" ref="uForm" label-width="160" :error-type=" ['toast']" :label-style="{fontSize:'28rpx',color:'rgba(153,153,153,1)'}">
				<u-form-item label="工作状态" prop="name">
					<view class="work-status" @click="showWorkSelect=true">
						<image src="../../../static/images/common/right.png" mode=""></image>
						{{ form.workStatus }}
					</view>
				</u-form-item>
				<u-form-item label="姓  名" prop="name">
					<u-input class="name" :custom-style="style" v-model="form.name" :clearable="false" input-align="right" />
				</u-form-item>
				<u-form-item label="性别" prop="name">
					<view class="work-status">
						<u-radio-group v-model="form.sex">
							<u-radio @change="radioChange" v-for="(item, index) in selectList" :key="index" :name="item.name" :disabled="item.disabled">
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</view>
				</u-form-item>
				<u-form-item label="民族" prop="name">
					<view class="work-status" @click="showNation=true">
						<image src="../../../static/images/common/right.png" mode=""></image>
						{{ form.nation }}
					</view>
				</u-form-item>
				<u-form-item label="所在城市:" prop="name">
					<view class="work-status" @click="showCity=true">
						<image src="../../../static/images/common/right.png" mode=""></image>
						{{ form.city }}
					</view>
				</u-form-item>
				<u-form-item label="身份:" prop="name">
					<view class="work-status" @click="showType=true">
						<image src="../../../static/images/common/right.png" mode=""></image>
						{{ form.type }}
					</view>
				</u-form-item>
				<u-form-item label="工种:" prop="name">
					<view class="kind-box">
						<view class="work-status">
							<block v-for="(item,index) in form.kindList" :key="index">
								<view class="kind-item">
									{{ item }}
									<image @click.stop="deleteKind(index)" src="../../../static/images/common/delete.png" mode=""></image>
								</view>
							</block>
						</view>
						<view class="work-status kind-status" @click="openShowKindType">
							<image class="kind-right" src="../../../static/images/common/right.png" mode=""></image>
							{{ form.kindList.length>2?'':'请添加' }}
						</view>
					</view>
				</u-form-item>
				<u-form-item label="期望工作地:" prop="name">
					<view class="work-status" @click="showAddress=true">
						<image src="../../../static/images/common/right.png" mode=""></image>
						{{ form.address }}
					</view>
				</u-form-item>
				<u-form-item label="联系电话" prop="phone">
					<u-input class="name" :custom-style="style" v-model="form.phone" :clearable="false" input-align="right"
					 placeholder="请输入手机号" />
				</u-form-item>
				<view class="fill-box">
					<view>

					</view>
				</view>
				<u-form-item label="自我介绍" prop="content" label-position="top" :border-bottom="false">
					<textarea class="textarea" placeholder-class="pleace" placeholder="请输入自我介绍(200以内)" maxlength="5"/>
				</u-form-item>
				<u-form-item label="职业技能" prop="content" label-position="top" :border-bottom="false">
					<textarea class="textarea" placeholder-class="pleace" placeholder="请输入职业技能(200以内)" maxlength="5"/>
				</u-form-item>
			</u-form>
			<view class="experience-title">
				<view class="left">
					项目经验
				</view>
				<view class="right" @click="goAdd">
					添加
				</view>
			</view>
			<block v-for="(item,index) in list" :key="index">
				<view class="experience-box">
					<view class="experience-box-title">
						<view class="left-title">
							2019.02.04-2019.04.08 <text>四川省</text>成都市
						</view>
						<view class="right-btn">
							修改
						</view>
					</view>
					<view class="experience-address">
						天府新区第八幼儿园
					</view>
					<view class="experience-text">
						主要做后浇带施工缝剔打，胀模，爆模，拆墙等等一系列工作
					</view>
					<view class="experience-img-box">
						<image src="../../../static/images/develop/hometopicon.png" mode=""></image>
						<image src="../../../static/images/develop/hometopicon.png" mode=""></image>
						<image src="../../../static/images/develop/hometopicon.png" mode=""></image>
					</view>
				</view>
			</block>
			<view class="foot-btn">
				<view class="left">查看职位</view>
				<view class="right">预览简历</view>
			</view>
		</view>
		<u-select v-model="showType" :list="TypeList" @confirm="selectTypeStatus"></u-select>
		<u-select v-model="showWorkSelect" :list="workList" @confirm="selectWorkStatus"></u-select>
		<u-select v-model="showNation" :list="nationList" @confirm="selectNation"></u-select>
		<u-picker v-model="showCity" mode="region" :params="params" :default-region="['四川省', '成都市']" @confirm="selectCity"></u-picker>
		<u-picker v-model="showAddress" mode="region" :params="params" :default-region="['四川省', '成都市']" @confirm="selectAddress"></u-picker>
		<u-select v-model="showKindType" mode="mutil-column-auto" :list="kindList" @confirm="selectJobType"></u-select>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import multipleMixin from '@/mixin/multiple-data-mixin';
	export default {
		mixins: [multipleMixin],
		data() {
			return {
				selectList: [{
					name: '男',
					disabled: false
				}, {
					name: '女',
					disabled: false
				}, ],
				workList: [{
						value: '1',
						label: '正在找工作'
					},
					{
						value: '2',
						label: '已找到工作'
					}
				],
				TypeList: [{
					label: "组长",
					value: 0
				}, {
					label: "组员",
					value: 1
				}],
				showWorkSelect: false,
				showNation: false,
				showCity: false,
				showType: false,
				showKindType: false,
				showAddress: false,
				style: {
					'fontSize': '32rpx',
					color: 'rgba(102,102,102,1)'
				},
				form: {
					name: '',
					workStatus: '',
					sex: '男',
					nation: '汉',
					city: '成都市',
					type: '组长',
					kindList: [],
					address: '成都市',
					phone: '',
					content: ''
				},
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						trigger: ['blur'],
					}],
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur'],
						}
					]
				},
				list:[1,2]
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {
			this.form.workStatus = this.workList[0].label;
		},
		methods: {
			goAdd(){
				this.$u.route({
					url: 'pages/home/resume/add',
				})
			},
			openShowKindType() {
				if (this.form.kindList.length > 2) {
					this.$refs.uToast.show({
						title: '最多添加三个工种',
						type: 'error'
					})
				} else {
					this.showKindType = true
				}
			},
			deleteKind(index) {
				this.form.kindList.splice(index, 1)
			},
			radioChange(e) {
				this.form.sex = e
			},
			selectWorkStatus(e) {
				this.form.workStatus = e[0].label
			},
			selectNation(e) {
				this.form.nation = e[0].label
			},
			selectCity(e) {
				this.form.city = e.city.label;
			},
			selectTypeStatus(e) {
				this.form.type = e[0].label
			},
			selectJobType(e) {
				if (this.form.kindList.indexOf(e[2].label) < 0) {
					this.form.kindList.push(e[2].label)
				}
			},
			selectAddress(e) {
				this.form.address = e.city.label;
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log(this.form.name)
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.slot-wrap {
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		width: 100%;
		box-sizing: border-box;

		.topBox {
			width: 100%;
			display: flex;

			.top-fill {
				flex: 1;
			}

			.clear-all {
				font-size: 28rpx;
				line-height: 44rpx;
				color: rgba(211, 176, 104, 1);
				opacity: 1;
			}
		}
	}

	.content {
		padding: 30rpx;

		.work-status {
			width: 100%;
			display: flex;
			flex-direction: row-reverse;
			font-size: 32rpx;
			font-weight: 400;
			line-height: 43rpx;
			color: rgba(102, 102, 102, 1);
			opacity: 1;

			.kind-item {
				position: relative;
				padding: 6rpx;
				margin-left: 20rpx;

				image {
					width: 26rpx;
					height: 26rpx;
					position: absolute;
					top: -14rpx;
					right: -10rpx;
				}
			}

			.kind-right {
				margin-top: 16rpx;
			}

			image {
				width: 14rpx;
				height: 24rpx;
				margin-top: 12rpx;
				margin-left: 24rpx;
			}
		}

		.kind-box {
			width: 100%;

			.kind-status {
				margin-top: 20rpx;
			}
		}

		.fill-box {
			margin-top: 40rpx;
			margin-bottom: 40rpx;
			position: relative;

			view {
				position: absolute;
				width: 750rpx;
				height: 10rpx;
				background: rgba(245, 245, 245, 1);
				opacity: 1;
				left: -30rpx;
				right: 0;
			}
		}
		.textarea{
			width: 100%;
			height: 284rpx;
			background:rgba(246,246,246,1);
			border-radius:10rpx;
			padding: 28rpx 26rpx;
			box-sizing: border-box;
			font-size:28rpx;
			font-weight:400;
			line-height:37rpx;
			opacity:1;
		}
		.pleace{
			font-size:28rpx;
			font-weight:400;
			line-height:37rpx;
			color:rgba(153,153,153,1);
			opacity:1;
		}
		.experience-title{
			width: 100%;
			display: flex;
			margin-top: 34rpx;
			justify-content: space-between;
			.left{
				font-size:28rpx;
				font-weight:400;
				line-height:70rpx;
				color:rgba(153,153,153,1);
				opacity:1;
			}
			.right{
				width:160rpx;
				height:70rpx;
				background:linear-gradient(180deg,rgba(211,176,105,1) 0%,rgba(228,205,112,1) 100%);
				border-radius:8rpx;
				font-size:30rpx;
				font-weight:400;
				line-height:70rpx;
				color:rgba(255,255,255,1);
				opacity:1;
				text-align: center;
			}
		}
		.experience-box{
			width: 100%;
			box-sizing: border-box;
			margin-top: 30rpx;
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid rgba(223,223,223,1);
			.experience-box-title{
				width: 100%;
				display: flex;
				justify-content: space-between;
				.left-title{
					font-size:24rpx;
					font-weight:400;
					line-height:70rpx;
					color:rgba(153,153,153,1);
					opacity:1;
					text{
						display: inline-block;
						margin: 0 20rpx;
					}
				}
				.right-btn{
					width:160rpx;
					height:70rpx;
					background:rgba(255,255,255,1);
					border:1rpx solid rgba(211,176,104,1);
					opacity:1;
					border-radius:8rpx;
					line-height:70rpx;
					text-align: center;
					font-size:30rpx;
					font-weight:400;
					color:rgba(211,176,104,1);
				}
				
			}
			.experience-address{
				margin: 20rpx 0 30rpx;
				font-size:28rpx;
				font-weight:bold;
				line-height:37rpx;
				color:rgba(51,51,51,1);
				opacity:1;
			}
			.experience-text{
				margin-bottom: 20rpx;
				font-size:24rpx;
				font-weight:400;
				line-height:32rpx;
				color:rgba(51,51,51,1);
				opacity:1;
			}
			.experience-img-box{
				display: flex;
				justify-content: space-between;
				image{
					width: 210rpx;
					height: 160rpx;
					border-radius:10rpx;
				}
			}
		}
		.foot-btn{
			margin-top: 65rpx;
			width: 100%;
			display: flex;
			justify-content: space-between;
			view{
				width: 47%;
				text-align: center;
				line-height: 90rpx;
				border-radius:8rpx;
			}
			.left{
				background:linear-gradient(180deg,rgba(211,176,105,1) 0%,rgba(228,205,112,1) 100%);
				opacity:1;
				font-size:30rpx;
				font-weight:400;
				color:rgba(255,255,255,1);
				opacity:1;
			}
			.right{
				background:rgba(255,255,255,1);
				border:1rpx solid rgba(153,153,153,1);
				opacity:1;
				font-size:30rpx;
				font-weight:400;
				color:rgba(153,153,153,1);
			}
		}
	}
</style>
